<template>
  <footer class="footer">
    <div class="layout-container">
      <el-row>
        <el-col :span="6">
          <div class="copyright">
            <h2>LOGO</h2>
            <p>© 2019 组件库</p>
            <p>蜀ICP备16025414号</p>
          </div>
        </el-col>
        <el-col :span="14">
          <el-row>
            <el-col :span="8">
              <dl class="links">
                <dt>公司</dt>
                <dd><a :href="'/help'" target="_blank">帮助中心</a></dd>
                <dd><a :href="'/help/about'" target="_blank">加入我们</a></dd>
                <dd><a :href="'/terms'" target="_blank">服务协议</a></dd>
              </dl>
            </el-col>
            <el-col :span="8">
              <dl class="links">
                <dt>产品</dt>
                <dd><a :href="'/help'" target="_blank">产品简介</a></dd>
                <dd><a :href="'/help/about'" target="_blank">产品列表</a></dd>
                <dd><a :href="'/terms'" target="_blank">模式</a></dd>
              </dl>
            </el-col>
            <el-col :span="8">
              <dl class="links">
                <dt>联系我们</dt>
                <dd>support@uee.com</dd>
                <dd>13322222222</dd>
              </dl>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" class="clearfix">
          <div class="social-code">
            <img src="../../../assets/code.png" alt="" />
            <p class="code-info">扫一扫关注公众号</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </footer>
</template>

<script>
export default {
  name: "LandingFooter"
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
footer.footer {
  border-top: 1px solid #e8e8e8;
  background: #f7f9fa;

  h2 {
    margin: 0;
    padding: 0;
  }

  .links {
    min-height: 16px;
    margin: 0;
    padding: 0;

    dt {
      font-size: 15px;
      line-height: 28px;
    }

    dd {
      margin: 0;
      padding: 0;
      font-size: 14px;
      line-height: 22px;

      a {
        display: inline-block;
        color: #8c8c8c;
        line-height: 1;

        &:hover {
          color: #bfbfbf;
        }
      }
    }
  }
}

.layout-container {
  max-width: 1056px;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;

  > .el-row {
    padding: 64px 0;
  }
}

.copyright {
  font-size: 15px;

  p {
    line-height: 22px;
    font-size: 14px;
    color: #333;
  }
}

.social-code {
  float: right;
  width: 136px;
  text-align: center;

  .code-info {
    font-size: 15px;
  }
}
</style>
